<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      :show-search="false"
      :data="treeFilterData"
      :default-value="initParam.feedTypeId"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="菜品加料列表"
        :columns="columns"
        :request-auto="false"
        :request-api="getFoodFeedList"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'addfeed'" type="primary" :icon="CirclePlus" @click="openDialog('新增', defaultData)">
            新增加料
          </el-button>
          <el-button v-auth="'addfeedtype'" type="primary" :icon="CirclePlus" @click="openGroupingDialog('加料')">
            新增加料分组
          </el-button>
          <el-button v-auth="'addtasktype'" type="primary" :icon="Setting" plain @click="openEditableDialog('管理加料分组')">
            管理加料分组
          </el-button>
        </template>
        <template #price="scope">
          <div>{{ scope.row.price === 0 ? "免费" : scope.row.price }}</div>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <!-- <el-button type="primary" link :icon="View" @click="openDialog('查看', scope.row)"> 关联菜品 </el-button> -->
          <el-button v-auth="'editfeed'" type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)">
            编辑
          </el-button>
          <el-button v-auth="'deletefeed'" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
      <GroupingDialog @handle-up-tree="onUptree" ref="groupingDialogRef" />
      <FeedingDialog ref="feedingDialogRef" />
      <EditableDialog @up-tree="onUptree" ref="editableDialogRef" />
    </div>
  </div>
</template>
<script setup lang="ts" name="supplementMange">
import { onMounted, ref, reactive } from "vue";
// import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import GroupingDialog from "@/views/goods/components/GroupingDialog.vue";
import FeedingDialog from "@/views/goods/components/FeedingDialog.vue";
import EditableDialog from "@/views/goods/components/EditableDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Setting } from "@element-plus/icons-vue";
import {
  getFoodFeedList,
  getFoodFeedCategory,
  createFoodFeedCategory,
  deleteFoodFeedCategory,
  editFoodFeedCategory,
  editFoodfeed,
  createFoodfeed,
  deleteFoodfeed
} from "@/api/modules/goods";
import { Goods } from "@/api/interface";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ feedTypeId: 0 });

// 树形筛选切换
const changeTreeFilter = (val: number) => {
  // ElMessage.success("请注意查看请求参数变化 🤔");
  proTable.value!.pageable.pageNum = 1;
  initParam.feedTypeId = val;
};

onMounted(() => {
  getTreeFilter();
});
// 新建加料默认参数
const defaultData = {
  warrantyType: 0,
  isPrint: true,
  changePrice: false,
  discounts: true,
  currencyFlag: 1,
  Status: 1
};
const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getFoodFeedCategory();
  treeFilterData.value = data.list;
  initParam.feedTypeId = treeFilterData.value[0].id;
};

// 表格配置项
const columns: ColumnProps<Goods.ParentFoodFeedList>[] = [
  { type: "index", label: "序号", width: 65 },
  {
    sortable: true,
    prop: "feedTypeId",
    label: "加料分组",
    minWidth: 120,
    enum: getFoodFeedCategory,
    fieldNames: { label: "name", value: "id" }
  },
  { sortable: true, prop: "name", label: "加料名称", minWidth: 120, search: { el: "input" } },
  { sortable: true, prop: "price", label: "价格", minWidth: 120 },
  { sortable: true, prop: "foodCount", label: "关联菜品数量", minWidth: 120 },
  { prop: "operation", label: "操作", width: 160, fixed: "right" }
];

// 删除菜品做法
const deleteAccount = async (params: Goods.ParentFoodFeedList) => {
  await useHandleData(deleteFoodfeed, { id: params.id }, `删除【${params.name}】加料`);
  proTable.value?.getTableList();
};

const editableDialogRef = ref<InstanceType<typeof EditableDialog> | null>(null);
const openEditableDialog = (title: string) => {
  const params = {
    title,
    isView: false,
    row: {},
    api: getFoodFeedCategory,
    edgapi: editFoodFeedCategory,
    delapi: deleteFoodFeedCategory
  };
  editableDialogRef.value?.acceptParams(params);
};

// 打开 Dialog(新增、查看、编辑)
const feedingDialogRef = ref<InstanceType<typeof FeedingDialog> | null>(null);
const openDialog = (title: string, row: Partial<Goods.ParentFoodFeedList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? createFoodfeed : title === "编辑" ? editFoodfeed : undefined,
    getTableList: proTable.value?.getTableList
  };
  feedingDialogRef.value?.acceptParams(params);
};

const onUptree = () => {
  getTreeFilter();
};
const groupingDialogRef = ref<InstanceType<typeof GroupingDialog> | null>(null);
const openGroupingDialog = (title: string, row: Partial<Goods.ParentFoodtaskCategory> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: false,
    api: createFoodFeedCategory
  };
  groupingDialogRef.value?.acceptParams(params);
};
</script>
